<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件事件绑定-子传父</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./vue.js"></script>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    .ff {
        color: royalblue;
    }

    .all {
        margin-left: 10px;
    }
    .model-text{
        border: 1px solid #e401f8;
        width: 158 px;
        height: 20px;
    }
</style>

<body>
    <div id="blog-posts-events-demo" class="all">
         <custom-input v-model="searchText"></custom-input> 
        <div class="model-text">{{searchText}}</div>
        <div :style="{ fontSize: postFontSize + 'em' }" class="ff">
            <button @click="postFontSize+=0.1">增大</button>
            <button @click="postFontSize-=0.1">缩小</button>
            <blog-post v-on:enlarge="postFontSize+=$event" @reduce="postFontSize-=0.1" @reset="resetEvent"
                v-for="item in posts" :id="item.id" :po="item"></blog-post>
        </div>
    </div>
    <script>
        Vue.component("blog-post", {
            props: ['po'],
            template: `<div>
                <h3>{{po.title}}</h3>
                <div v-html="po.id" ></div>
                <button v-on:click="$emit('enlarge',0.5)">enlarge</button>
                <button v-on:click="$emit('reduce')">reduce</button>
                <button v-on:click="$emit('reset',1.2)">reset</button>
                </div>
            `
        });
        // 特殊监听v-model
        Vue.component('custom-input', {
            props: ['searchText'],
            template: `
                    <input
                    v-bind:value="searchText"
                    v-on:input="$emit('input', $event.target.value)"
                    >
                `
        });

        const app = new Vue({
            el: '#blog-posts-events-demo',
            data: {
                posts: [{ id: 1, title: '标题2', content: 'fdsjka' },
                { id: 2, title: '标题2', content: 'fdsjka' },],
                postFontSize: 1,
                searchText:'ss'
            },
            methods: {
                resetEvent: function (args) {
                    console.log({ args })//args是从组件中$emit("eventName",args)传过来的
                    this.postFontSize = args;
                },
            },
        });
    </script>
</body>

</html>